<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>TypeScript | 北城韩雨</title><meta name="keywords" content="TS"><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="TS">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript">
<meta property="og:url" content="http://example.com/2020/04/23/TypeScript/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="TS">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530702&t=80943e12d5239f63beafd6d1c540855f">
<meta property="article:published_time" content="2020-04-22T16:00:00.000Z">
<meta property="article:modified_time" content="2019-06-02T16:00:00.000Z">
<meta property="article:author" content="北城韩雨">
<meta property="article:tag" content="TypeScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530702&t=80943e12d5239f63beafd6d1c540855f"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2020/04/23/TypeScript/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'TypeScript',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2019-06-03 00:00:00'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">TypeScript</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-04-22T16:00:00.000Z" title="发表于 2020-04-23 00:00:00">2020-04-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2019-06-02T16:00:00.000Z" title="更新于 2019-06-03 00:00:00">2019-06-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/TS/">TS</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">7.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>28分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="TypeScript"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h1><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 这里采用的全局安装 yarn <span class="built_in">global</span> add typescript </span><br><span class="line"><span class="number">2.</span> 查看安装是否成功 tsc -v</span><br></pre></td></tr></table></figure>
<h2 id="编译"><a href="#编译" class="headerlink" title="编译"></a>编译</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>typescript的创建的文件是.ts后缀的文件</span><br><span class="line"><span class="number">2.</span>手动编译</span><br><span class="line"><span class="number">3.</span>配置文件编译</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//手动编译</span></span><br><span class="line">index.ts文件  使用 tsc + 文件名称 进行编译 编译之后就会自动生成 index.js文件</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自动编译</span></span><br><span class="line"><span class="number">1.</span>在项目目录里 用tsc --init生成 tsconfig.json的文件</span><br><span class="line"><span class="number">2.</span>更改生成的tsconfig.json 配置文件里的  <span class="string">&quot;outDir&quot;</span>: <span class="string">&quot;./&quot;</span> 修改为  <span class="string">&quot;outDir&quot;</span>: <span class="string">&quot;./js&quot;</span> 就是把编译好的文件生成当前目录下的js文件夹里</span><br><span class="line"><span class="number">3.</span>在vscode编译器 打开终端 选择 运行任务 选择typescript 监视文件 即可</span><br><span class="line"><span class="number">4.</span>也可以执行命令 tsc --watch index.ts</span><br></pre></td></tr></table></figure>
<h2 id="ts中的数据类型"><a href="#ts中的数据类型" class="headerlink" title="ts中的数据类型"></a>ts中的数据类型</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>TS中提供类型校验</span><br><span class="line"><span class="number">2.</span>其中提供了以下一些数据类型</span><br><span class="line">布尔类型(boolean)</span><br><span class="line">数组类型(<span class="built_in">Number</span>)</span><br><span class="line">字符串类型(string)</span><br><span class="line">数组类型(array)</span><br><span class="line">元组类型(tuple)</span><br><span class="line">任意类型(any)</span><br><span class="line"><span class="literal">null</span> 和 <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">void</span> 类型 </span><br><span class="line">never 类型</span><br><span class="line"><span class="number">3.</span>我们在定义变量的时候 就必须要指定类型</span><br></pre></td></tr></table></figure>
<h3 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> flag:boolean = <span class="literal">true</span> <span class="comment">//定义的时候就把类型也定义了</span></span><br><span class="line">flag = <span class="string">&#x27;你好&#x27;</span> <span class="comment">//如果赋值于别的类型了 就会报错</span></span><br></pre></td></tr></table></figure>
<h3 id="数字类型"><a href="#数字类型" class="headerlink" title="数字类型"></a>数字类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a:number = <span class="number">123</span> <span class="comment">//定义就数字类型</span></span><br><span class="line">a = <span class="string">&#x27;你好&#x27;</span> <span class="comment">//如果赋值于别的类型 就会报错</span></span><br></pre></td></tr></table></figure>
<h2 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str:string = <span class="string">&#x27;你好&#x27;</span> <span class="comment">//定义为字符串类型</span></span><br><span class="line">a = <span class="number">234</span> <span class="comment">//如果赋值为别的类型 就会报错</span></span><br></pre></td></tr></table></figure>
<h3 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>定义的时候就指定类型的数组</span><br><span class="line"><span class="keyword">let</span> arr:number[] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>] <span class="comment">//定义只是number类型的数组</span></span><br><span class="line">定义string类型的数组</span><br><span class="line"><span class="keyword">let</span> arr:string[] = [<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;2&#x27;</span>,<span class="string">&#x27;3&#x27;</span>]</span><br><span class="line"><span class="number">2.</span>定义数组的第二种方式 泛型定义</span><br><span class="line"><span class="keyword">let</span> arr:<span class="built_in">Array</span>&lt;number&gt; = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"><span class="keyword">let</span> arr:<span class="built_in">Array</span>&lt;<span class="built_in">Object</span>&gt; = [&#123;<span class="attr">name</span>:<span class="string">&#x27;zs&#x27;</span>&#125;]</span><br><span class="line"><span class="comment">//定义数组里面的任何元素</span></span><br><span class="line"><span class="keyword">let</span> arr:any[] = [<span class="number">123</span>,<span class="string">&#x27;4324&#x27;</span>,<span class="literal">false</span>]</span><br></pre></td></tr></table></figure>
<h3 id="元组类型"><a href="#元组类型" class="headerlink" title="元组类型"></a>元组类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>元组类型(tuple) 属于数组的一种 可以指定数组里面的每一个元素的类型</span><br><span class="line"><span class="keyword">let</span> arr:[string,number,boolean] = [<span class="string">&#x27;你好&#x27;</span>,<span class="number">3.14</span>,<span class="literal">false</span>]</span><br></pre></td></tr></table></figure>
<h3 id="枚举类型-enum"><a href="#枚举类型-enum" class="headerlink" title="枚举类型(enum)"></a>枚举类型(enum)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>随着计算机的不断普及 程序不仅仅用于数值计算 还更广泛地用于处理非数值数据 比如性别 月份 星期几 颜色 单位名 学历 职业等 这些都不是数值数据 在计算机程序中用自然语言中有相应含义的单词 来代表某一状态 则程序就很容易阅读和理解 尽量用自然语言中含义清楚的单词来表示它的每一个值 这种方法称为枚举方法 用这种方式定义的类型称枚举类型</span><br><span class="line"><span class="number">2.</span>如果其中有一个枚举类型被赋值了那么它的下一个就会自增</span><br><span class="line"><span class="comment">//定义一个枚举类型</span></span><br><span class="line">enum Flag &#123;success=<span class="number">1</span>,err=-<span class="number">1</span>&#125; <span class="comment">//定义一个枚举类型 1就是成功 -1就是失败</span></span><br><span class="line"><span class="comment">//然后赋值给某一个变量 f变量是枚举类型 他的值成功也就是1</span></span><br><span class="line"><span class="keyword">let</span> f:Flag = Flag.success</span><br><span class="line"><span class="comment">//例子</span></span><br><span class="line">enum Color&#123;red,blue,green&#125; <span class="comment">//定义枚举类型但是没有赋值</span></span><br><span class="line"><span class="keyword">var</span> c:Color = Color.red <span class="comment">//在没赋值的情况下 输出的索引 也就是0</span></span><br></pre></td></tr></table></figure>
<h3 id="任意类型"><a href="#任意类型" class="headerlink" title="任意类型"></a>任意类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>可以定义任意类型</span><br><span class="line"><span class="number">2.</span>一般用于原生JS获取DOM对象</span><br><span class="line"><span class="keyword">var</span> n:any = <span class="string">&#x27;Nihao&#x27;</span></span><br><span class="line">n = <span class="number">133</span> <span class="comment">//赋值了数字类型 不会报错</span></span><br></pre></td></tr></table></figure>
<h3 id="null-和-undefined"><a href="#null-和-undefined" class="headerlink" title="null 和 undefined"></a>null 和 undefined</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>当我们声明了一个变量没有赋值的时候 就会报<span class="literal">undefined</span></span><br><span class="line"><span class="number">2.</span>所以我们需要指定类型</span><br><span class="line"><span class="keyword">let</span> num:<span class="literal">undefined</span> </span><br><span class="line"><span class="comment">//可以指定它是哪种类型</span></span><br><span class="line"><span class="keyword">let</span> num:number | <span class="literal">undefined</span> | <span class="literal">null</span></span><br><span class="line">num = <span class="number">123</span> <span class="comment">//不会报错</span></span><br></pre></td></tr></table></figure>
<h3 id="void"><a href="#void" class="headerlink" title="void"></a>void</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="keyword">void</span>表示没有任何类型 一般用于方法没有返回值的时候</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">run</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;run&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//如果一个方法没有返回值 就用void去定义</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">run</span>:<span class="title">void</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;run&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//函数要指定返回的值的 不会报错</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">run</span>:<span class="title">number</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">123</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="never类型"><a href="#never类型" class="headerlink" title="never类型"></a>never类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>其他类型 表示从不会出现的值 子类型是<span class="literal">null</span> <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">var</span> a:never;</span><br><span class="line">a =<span class="number">123</span> <span class="comment">//报错</span></span><br><span class="line"><span class="comment">//一般用在 抛出错误方面</span></span><br><span class="line">a = (<span class="function">() =&gt;</span> &#123;<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;错误&#x27;</span>)&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>声明函数</span><br><span class="line"><span class="comment">//定义函数返回的类型是字符串</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">run</span>(<span class="params"></span>):<span class="title">string</span></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;123&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="number">2.</span>函数表达式</span><br><span class="line"><span class="keyword">const</span> fun = ():<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;111&#x27;</span> <span class="comment">//返回值必须是字符串</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="number">3.</span>传参也可以指定类型</span><br><span class="line"><span class="keyword">const</span> fun = (age:string,<span class="attr">name</span>:number):<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> age+name</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> n = fun(<span class="string">&#x27;11&#x27;</span>,<span class="number">11</span>)</span><br><span class="line"><span class="number">4.</span>可选参数 就是实参可传可不传</span><br><span class="line"><span class="comment">//需要可传可不传的参数加个问好即可 可选参数必须配置形参的最后面</span></span><br><span class="line"><span class="keyword">const</span> fun = (name:string,age?:string):<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age</span><br><span class="line">&#125;</span><br><span class="line">fun(<span class="string">&#x27;zs&#x27;</span>)</span><br><span class="line"><span class="number">5.</span>默认参数 在类型后面写等于号加赋值</span><br><span class="line"><span class="keyword">const</span> fun = (name:string=<span class="string">&#x27;张灿&#x27;</span>,age?:string):<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> name + age</span><br><span class="line">&#125;</span><br><span class="line">fun(<span class="string">&#x27;zs&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="重载函数"><a href="#重载函数" class="headerlink" title="重载函数"></a>重载函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>重载函数 指的是两个或者两个以上的同名函数 但是他们的参数不一样 这是会出现函数重载的情况</span><br><span class="line"><span class="number">2.</span>ts中的函数重载 通过为一个函数提供多个函数类型的定义来实现多种功能的方式</span><br><span class="line"><span class="comment">//ts中重载</span></span><br><span class="line">定义两个没有函数体的函数 只不过形参传入不一样</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInfo</span>(<span class="params">name:string</span>):<span class="title">string</span></span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">getInfo</span>(<span class="params">age:number</span>):<span class="title">number</span></span></span></span><br><span class="line"><span class="function"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">getInfo</span>(<span class="params">str:any</span>):<span class="title">any</span></span>&#123;</span></span></span><br><span class="line"><span class="function"><span class="function">    <span class="title">if</span>(<span class="params"><span class="keyword">typeof</span> str === <span class="string">&#x27;string&#x27;</span></span>)</span>&#123;</span></span><br><span class="line"><span class="function">        <span class="title">return</span> <span class="title">str</span></span></span><br><span class="line"><span class="function">    &#125;<span class="title">else</span></span>&#123;</span><br><span class="line">        <span class="keyword">return</span> number</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="TS定义类"><a href="#TS定义类" class="headerlink" title="TS定义类"></a>TS定义类</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>用<span class="class"><span class="keyword">class</span>关键字去定义类</span></span><br><span class="line"><span class="class"><span class="title">class</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line">    <span class="comment">//构造函数 实力化类的时候 触发的方法</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">    run():string&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.name</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="TS-类里的修饰符"><a href="#TS-类里的修饰符" class="headerlink" title="TS 类里的修饰符"></a>TS 类里的修饰符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>TS 里面定义属性的时候给我们提供了 三种修饰符</span><br><span class="line">public 公有 在里面 子类 类外部 都可以访问</span><br><span class="line">protected  保护类型 在类里面 子类里都可以访问 在类外部没办法访问</span><br><span class="line">private 私有 在当前类里面可以访问 字类 和外部都没有办法访问</span><br><span class="line"><span class="number">2.</span>属性不加以上那些修饰符 就是公有</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//public</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span> </span>&#123;</span><br><span class="line">    <span class="comment">//定义了类里面的name属性 是公有 子类和外部都可以访问</span></span><br><span class="line">    public name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Preson(<span class="string">&#x27;哈哈&#x27;</span>)</span><br><span class="line"><span class="comment">//在外部也可以访问</span></span><br><span class="line"><span class="built_in">console</span>.log(p.name)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//protected 当前类和子类都可以访问 外部访问不了</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span> </span>&#123;</span><br><span class="line">    <span class="comment">//定义了类里面的name属性 是公有 子类和外部都可以访问</span></span><br><span class="line">    protected name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Preson(<span class="string">&#x27;哈哈&#x27;</span>)</span><br><span class="line"><span class="comment">//在外部也可以访问</span></span><br><span class="line"><span class="built_in">console</span>.log(p.name)</span><br></pre></td></tr></table></figure>
<h2 id="TS多态-继承的一种"><a href="#TS多态-继承的一种" class="headerlink" title="TS多态 继承的一种"></a>TS多态 继承的一种</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>父类里面写了一个方法 但是没有写逻辑 </span><br><span class="line"><span class="number">2.</span>让子类去实现 这个方法里的逻辑</span><br><span class="line"><span class="number">3.</span>主要是定义一个类的标准 我抽象类里面的方法 你必须在子类也有要写</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//动物都有吃的方法 但是具体吃什么不知道 完全是由字类决定 这种就叫多态</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Ainemall</span> </span>&#123;</span><br><span class="line">    name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//父类有吃的方法但是具体吃什么不知道 完全有子类去实现</span></span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;具体吃什么不知道&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="keyword">extends</span> <span class="title">Ainemall</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>(name)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//子类去实现父类里吃的方法 叫多态</span></span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//比如小狗吃骨头</span></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.name + <span class="string">&#x27;吃骨头&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cat</span> <span class="keyword">extends</span> <span class="title">Ainemall</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>(name)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//小猫吃老鼠</span></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.name + <span class="string">&#x27;吃老鼠&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="TS-抽象类"><a href="#TS-抽象类" class="headerlink" title="TS 抽象类"></a>TS 抽象类</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>抽象类是提供其他类继承的基类 不能被实力化</span><br><span class="line"><span class="number">2.</span>用abstract 关键字 定义抽象类和抽象方法 抽象类中的抽象方法不包含举例的实现 并且 只能在派生类中实现</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义的抽象类 必须有抽象方法 但是也可以有非抽象的方法 而且定义的抽象类不能被实力化 </span></span><br><span class="line">abstract <span class="class"><span class="keyword">class</span> <span class="title">Animall</span> </span>&#123;</span><br><span class="line">    public name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;   </span><br><span class="line">    <span class="comment">//必须包含抽象方法</span></span><br><span class="line">    abstract eat():any</span><br><span class="line">    <span class="comment">//也可以有非抽象的方法</span></span><br><span class="line">    <span class="function"><span class="title">say</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;我的名字叫&#x27;</span>  + <span class="built_in">this</span>.name</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//抽象类的子类 必须要去实现 抽象类里的抽象方法</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cat</span> <span class="keyword">extends</span> <span class="title">Animall</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(name)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//抽象类的子类 必须实现抽象类中的抽象方法</span></span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃老鼠&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> cat = <span class="keyword">new</span> Cat(<span class="string">&#x27;jerrey&#x27;</span>)</span><br><span class="line">cat.eat()</span><br></pre></td></tr></table></figure>
<h2 id="TS-接口"><a href="#TS-接口" class="headerlink" title="TS 接口"></a>TS 接口</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>在面向对象编程中 接口是一种规范的定义 它定义了行为和动作的规范 在程序设计里面 接口起到一种限制和规范的作用 接口定义了某一批类所需要遵守的规范 接口不关心这些类内部的状态数据 它只规定这批类里面必须提供某些方法 提供的这些方法的类就可以满足实际需要 ts中的接口 类似于java 同时还增加了更灵活的接口类型 包括属性 函数 索引 和 类等</span><br><span class="line"><span class="number">2.</span>属性类接口</span><br><span class="line">  函数类型接口</span><br><span class="line">  可索引接口</span><br><span class="line">  类类型接口</span><br><span class="line">  接口扩展</span><br></pre></td></tr></table></figure>
<h3 id="属性接口"><a href="#属性接口" class="headerlink" title="属性接口"></a>属性接口</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对json对象 的 约束</span></span><br><span class="line"><span class="comment">//定义了一个方法 形参传入一个对象 对象里必须有label的这个属性 而且值是字符串 传入别的就会报错</span></span><br><span class="line"><span class="keyword">const</span> pritObj = <span class="function">(<span class="params">labelinfo:&#123;label:string&#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(labelinfo.label)</span><br><span class="line">&#125;</span><br><span class="line">pritObj(&#123;<span class="attr">label</span>:<span class="string">&quot;111&quot;</span>&#125;)</span><br><span class="line"><span class="comment">//上面是基本的概念 但是如我我们要批量处理的就会很麻烦 所以我们定义一个接口 用 interface 来定义 你要传入函数里的对象必须要有onename twoname两个字段</span></span><br><span class="line">interface FullName &#123;</span><br><span class="line">    onename:string; <span class="comment">//这里要以分号为结尾</span></span><br><span class="line">    twoname:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//当你在传入obj这个参数的时候 要按照我们定义的FullName的接口去写</span></span><br><span class="line"><span class="keyword">const</span> print = <span class="function">(<span class="params">obj:FullName</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这样在写数据的时候 要按照我们定义的FullName这个接口去写数据 </span></span><br><span class="line"><span class="keyword">const</span> obj =&#123;</span><br><span class="line">    <span class="comment">//用这种字面量的方法传入 如果有多余的属性比如age也不会报错</span></span><br><span class="line">    age:<span class="number">111</span></span><br><span class="line">    onename:<span class="string">&#x27;111&#x27;</span>,</span><br><span class="line">    twoname:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">print(obj)</span><br><span class="line"><span class="comment">//-----------------------------------------//</span></span><br><span class="line"><span class="comment">//如果用这种方式去传入参数 有多余的age 就会报错</span></span><br><span class="line">print(&#123;<span class="attr">age</span>:<span class="number">111</span>,<span class="attr">onename</span>:<span class="string">&#x27;111&#x27;</span>, <span class="attr">twoname</span>:<span class="string">&#x27;222&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="接口可选属性"><a href="#接口可选属性" class="headerlink" title="接口可选属性"></a>接口可选属性</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//刚刚上面 我们的接口属性 必须按照我们规定的去传 如果你多传入一个的话 你在函数里面使用了就会报错</span></span><br><span class="line">interface FullName &#123;</span><br><span class="line">    onename:string; </span><br><span class="line">    twoname:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> print = <span class="function">(<span class="params">obj:FullName</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//obj.age 就会报错</span></span><br><span class="line">    <span class="built_in">console</span>.log(obj.onename+obj.twoname+obj.age)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj =&#123;</span><br><span class="line"><span class="comment">//这里多传了一个age</span></span><br><span class="line">    age:<span class="number">111</span></span><br><span class="line">    onename:<span class="string">&#x27;111&#x27;</span>,</span><br><span class="line">    twoname:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">print(obj)</span><br><span class="line"><span class="comment">//但是 在print的这个函数里面我用不到age 可是别的会用到 这样报错就不太合适 所以就有了可选属性</span></span><br><span class="line">interface FullName &#123;</span><br><span class="line">    onename:string; </span><br><span class="line">    twoname:string;</span><br><span class="line">    age?:number; <span class="comment">//这样加个问好 就是你可传可不传</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="函数类型接口"><a href="#函数类型接口" class="headerlink" title="函数类型接口"></a>函数类型接口</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>主要是对方法传入的参数 以及返回值 进行约束</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//约定函数的传参</span></span><br><span class="line">interface entry&#123;</span><br><span class="line">    <span class="comment">//约定函数里你必须给我传入一个key 是字符串 value 也是字符串 返回值也是字符串</span></span><br><span class="line">    (key:string,<span class="attr">value</span>:string):string</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里就是你这个函数的传参 必须按照我上面的那个接口规定的方式去传参</span></span><br><span class="line"><span class="keyword">const</span> md5:entry = (key:string,<span class="attr">value</span>:string):<span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> key + value</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="可索引接口"><a href="#可索引接口" class="headerlink" title="可索引接口"></a>可索引接口</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>主要是对数组和对象的约束</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组</span></span><br><span class="line">interface UserArr&#123;</span><br><span class="line">    <span class="comment">//索引是数字 元素是字符串</span></span><br><span class="line">    [index:number]:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//定义的数据要按照我们UserArr接口去写</span></span><br><span class="line"><span class="keyword">const</span> arr:UserArr=[<span class="string">&#x27;aaa&#x27;</span>,<span class="string">&#x27;bbb&#x27;</span>]</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//对象</span></span><br><span class="line">interface UserObj&#123;</span><br><span class="line">    [index:string]:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    name:<span class="string">&#x27;zs&#x27;</span>,</span><br><span class="line">    age:<span class="number">14</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="类类型接口"><a href="#类类型接口" class="headerlink" title="类类型接口"></a>类类型接口</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>对类的约束 和 和abstract 抽象类有点类似</span><br><span class="line"><span class="number">2.</span>我们定义类的标准 比如你这个类里面必须有那个属性 必须有哪些方法</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义一个类的标准 使用 implements 关键字 去使用这个接口的标准 以后定义的类都要有我这些属性和方法</span></span><br><span class="line">interface Animall&#123;</span><br><span class="line">    <span class="comment">//定义了类的接口 你新建的类的只要使用我这个接口就必须有name属性 和eat方法</span></span><br><span class="line">    name:string;</span><br><span class="line">    eat(str:string):<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//使用 implements 去使用 当然也可以使用别的属性</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="title">implements</span> <span class="title">Animall</span> </span>&#123;</span><br><span class="line">    <span class="comment">//使用了这个接口的类 必须有name的这个属性</span></span><br><span class="line">    name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//还要有eat的这个方法</span></span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="接口扩展"><a href="#接口扩展" class="headerlink" title="接口扩展"></a>接口扩展</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>就是接口可以继承别的接口</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">interfase Animall &#123;</span><br><span class="line">    eat():<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Preson的接口 继承了 Animall的接口</span></span><br><span class="line">interface Preson <span class="keyword">extends</span> Animall&#123;</span><br><span class="line">    work():<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//如果此时我们实力化了Preson 就必须要有eat 和work 两个方法</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Web</span> <span class="title">implements</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    public name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//必须要有约束中的work方法</span></span><br><span class="line">    <span class="function"><span class="title">work</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我在工作&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//而且也要有 Preson继承的Animall接口中的eat方法</span></span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我是吃东西&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//上面的接口不但可以继承 使用implements关键字 使用接口的类 也可以继承自己的父类</span></span><br><span class="line"></span><br><span class="line">interfase Animall &#123;</span><br><span class="line">    eat():<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">interface Preson <span class="keyword">extends</span> Animall&#123;</span><br><span class="line">    work():<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Promisee</span> </span>&#123;</span><br><span class="line">    name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">code</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我去写代码&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里继承父类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Web</span> <span class="keyword">extends</span> <span class="title">Promisee</span> <span class="title">implements</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    public name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">       <span class="built_in">super</span>(name)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//必须要有约束中的work方法</span></span><br><span class="line">    <span class="function"><span class="title">work</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我在工作&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//而且也要有 Preson继承的Animall接口中的eat方法</span></span><br><span class="line">    <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我是吃东西&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="TS中的泛型"><a href="#TS中的泛型" class="headerlink" title="TS中的泛型"></a>TS中的泛型</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>主要是用来解决 类 方法的复用性 以及对不特定数据类型的支持</span><br><span class="line"><span class="number">2.</span>对于固定的传参输入 返回固定的输出</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这里不使用any 是因为 你用了any之后就放弃了类型检查 而我们需要的是 比如你传入number 我就给你返回number 传入string 就返回 string</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getdata</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">    <span class="comment">//大T 就是泛型 具体是什么类型就是方法调用的时候 决定的</span></span><br><span class="line">    <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line">getdata&lt;number&gt;(<span class="number">123</span>) <span class="comment">//这里 就是传入的是number 那么返回的就是number</span></span><br><span class="line">getdata&lt;string&gt;(<span class="string">&quot;123&quot;</span>) <span class="comment">//这里 就是传入的是string 那么返回的就是string</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//当然这里也可以指定返回的类型</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getdata</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">    <span class="comment">//大T 就是泛型 具体是什么类型就是方法调用的时候 决定的</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;1234&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//泛型类 比如有个最小堆的算法 需要同时支持返回数字和字符串两种类型 通过泛型类来实现</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Mymin</span></span>&#123;</span><br><span class="line">    arr:number[] = []</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.arr = []</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params">num:number</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.arr.push(num)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">min</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> one = <span class="built_in">this</span>.arr[<span class="number">0</span>]</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="built_in">this</span>.arr.length; i++)&#123;</span><br><span class="line">            <span class="keyword">if</span>(one &gt; <span class="built_in">this</span>.arr[i])&#123;</span><br><span class="line">                one = <span class="built_in">this</span>.arr[i]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> one</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> n = <span class="keyword">new</span> Mymin</span><br><span class="line">n.add(<span class="number">2</span>)</span><br><span class="line">n.add(<span class="number">1</span>)</span><br><span class="line">n.add(<span class="number">6</span>)</span><br><span class="line">n.add(<span class="number">9</span>)</span><br><span class="line">n.add(<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(n.min()) <span class="comment">//输入0</span></span><br><span class="line"><span class="comment">//通过上面的例子 我们知道 这里就值能返回数字 而返回不了字符串之类的 如果还有别的类型我们就支持不了 这个问题就可以用泛型去解决 </span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义泛型类 和我们上面的方法一样</span></span><br><span class="line"><span class="comment">//定义一个泛型类 也就是你的new的时候 需要指定我是什么类型的类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Mymin</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">    <span class="comment">//定义了泛型数组 </span></span><br><span class="line">    public list:T[] = []</span><br><span class="line">	<span class="comment">//在使用add方法的时候 你必须要遵循你你实力化的时候传入的类型</span></span><br><span class="line">	add(value:T):<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.list.push(value)</span><br><span class="line">    &#125;</span><br><span class="line">    min():T&#123;</span><br><span class="line">        <span class="keyword">let</span> one = <span class="built_in">this</span>.arr[<span class="number">0</span>]</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="built_in">this</span>.arr.length; i++)&#123;</span><br><span class="line">            <span class="keyword">if</span>(one &gt; <span class="built_in">this</span>.arr[i])&#123;</span><br><span class="line">                one = <span class="built_in">this</span>.arr[i]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> one</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//开始实力化类</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> Mymin&lt;number&gt; <span class="comment">//这里就是指定泛型最终接收的number类型 </span></span><br><span class="line">p.add(<span class="string">&#x27;aaa&#x27;</span>) <span class="comment">//会报错</span></span><br><span class="line">p.add(<span class="number">123</span>) <span class="comment">//因为你上面指定我在实例类的时候给你传入的是数字类型 这个就不会报错</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> Mymin&lt;string&gt; <span class="comment">//这样指定了实例的时候传入的是泛型 string </span></span><br></pre></td></tr></table></figure>
<h2 id="TS-泛型接口"><a href="#TS-泛型接口" class="headerlink" title="TS 泛型接口"></a>TS 泛型接口</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">interface Config&#123;</span><br><span class="line">    <span class="comment">//这样就是定义了一个泛型的接口</span></span><br><span class="line">    &lt;T&gt;(value:T):T</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//然后定义个函数使用这个接口</span></span><br><span class="line"><span class="keyword">const</span> getdata:Config = &lt;T&gt;(value:T):<span class="function"><span class="params">T</span> =&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value</span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">//调用 你调用的时候传给泛型的类型是number 所以传参也要写number</span></span><br><span class="line">getdata&lt;number&gt;(<span class="number">123</span>)</span><br><span class="line">getdata&lt;string&gt;(<span class="string">&quot;123&quot;</span>) <span class="comment">//这里在调用的时候传入的是 string的 所以传参的时候也要传入string</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第二种定义泛型的接口</span></span><br><span class="line">interface Config&lt;T&gt;&#123;</span><br><span class="line">    (vale:T):T</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//定义一个泛型的函数 </span></span><br><span class="line"><span class="keyword">const</span> getdata&lt;T&gt; = (valueL:T):<span class="function"><span class="params">T</span> =&gt;</span> &#123;<span class="keyword">return</span> value&#125;</span><br><span class="line"><span class="comment">// 然后让我们的泛型接口 等于我们的这个泛型函数 给泛型传入数据类型</span></span><br><span class="line"><span class="keyword">const</span> mygetdata:Config&lt;string&gt; = getdata</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">mygetdata(<span class="string">&#x27;aaaa&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="TS中类作为参数"><a href="#TS中类作为参数" class="headerlink" title="TS中类作为参数"></a>TS中类作为参数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们可以定义一个类 对这个类做校验</span><br><span class="line"><span class="number">2.</span>当我们把这个类传入到某一个方法 或者 函数里的时候 要按照这个类的的校验去写</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把类作为参数来约束传入的类型</span></span><br><span class="line"><span class="comment">//这里就是 你可以是string 也有可能什么都没有</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span> </span>&#123;</span><br><span class="line">    username:string | <span class="literal">undefined</span>;</span><br><span class="line">    password:string | <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//定义方法类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MysqlDb</span></span>&#123;</span><br><span class="line">    <span class="comment">//当给我的add方法传入参数的时候 必须是这个user类的数据格式</span></span><br><span class="line">    add(user:User):boolean&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> u = <span class="keyword">new</span> User()</span><br><span class="line">u.username = <span class="string">&#x27;张三&#x27;</span></span><br><span class="line">u.password = <span class="string">&#x27;123456&#x27;</span></span><br><span class="line"><span class="keyword">const</span> db = <span class="keyword">new</span> MysqlDb()</span><br><span class="line"><span class="comment">//如果你传入别的就会报错</span></span><br><span class="line">db.add(u)</span><br><span class="line"><span class="comment">//报错的情况</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    username:<span class="string">&#x27;zhangsa&#x27;</span>,</span><br><span class="line">    userpassword:<span class="string">&#x27;1111&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> db = <span class="keyword">new</span> MysqlDb()</span><br><span class="line">db.add(obj) <span class="comment">//报错</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//上面的问题是 如果我们同一个MysqlDb的类的add方法 除了User类还需要传入 别的不同的类 就会变得不是那么方便 所以我们需要指定MysqlDb是一个泛型类 然后传入User类即可</span></span><br><span class="line"><span class="comment">//还是先定义泛型类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MysqlDb</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params">info:T</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span></span>&#123;</span><br><span class="line">    username: string | <span class="literal">undefined</span></span><br><span class="line">    password: string | <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> u = <span class="keyword">new</span> User()</span><br><span class="line">u.username = <span class="string">&#x27;张三&#x27;</span> u.password = <span class="string">&#x27;李四&#x27;</span></span><br><span class="line"><span class="comment">//在实力化MysqlDb类的时候 就指定User是他泛型的数据类型</span></span><br><span class="line"><span class="keyword">const</span> db = <span class="keyword">new</span> MysqlDb&lt;User&gt;()</span><br><span class="line">db.user(u)</span><br><span class="line"><span class="comment">//如果我们还有一个info类 这样就会方便很多</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Info</span></span>&#123;</span><br><span class="line">    age:number|<span class="literal">undefined</span>,</span><br><span class="line">    sex:string| <span class="literal">undefined</span>   </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">in</span> = <span class="keyword">new</span> Info()</span><br><span class="line"><span class="keyword">in</span>.age = <span class="number">12</span></span><br><span class="line"><span class="keyword">in</span>.sex = <span class="string">&#x27;男&#x27;</span></span><br><span class="line"><span class="comment">//在实力化MysqlDb类的时候 就指定Info是他泛型的数据类型</span></span><br><span class="line"><span class="keyword">const</span> db =  <span class="keyword">new</span> MysqlDb&lt;Info&gt;()</span><br></pre></td></tr></table></figure>
<h2 id="综合使用"><a href="#综合使用" class="headerlink" title="综合使用"></a>综合使用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用类型 接口 类 泛型 封装统一操作Mysql Mongodb Mssql的底层封装库</span></span><br><span class="line"><span class="number">1.</span>约束统一的规范 以及代码重用</span><br><span class="line"><span class="number">2.</span> 以上数据库功能都一样 有 add update <span class="keyword">delete</span> get 方法 </span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//首先我们还是要定义泛型接口 </span></span><br><span class="line">interface Config&lt;T&gt;&#123;</span><br><span class="line">    add(info:T):boolean;</span><br><span class="line">    updated (info:T,<span class="attr">id</span>:number):<span class="keyword">void</span> ;</span><br><span class="line">    <span class="keyword">delete</span>(id:number):<span class="keyword">void</span>;</span><br><span class="line">    get(id:number):any[];</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//然后我们定义的类使用这个泛型接口 注意 使用泛型接口的类也一定是泛型类 这个类一定要有以上那些方法</span></span><br><span class="line"><span class="comment">//小技巧 可以点快速修复之后 就会弹出创建菜单 快速创建</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Mysql</span>&lt;<span class="title">T</span>&gt; <span class="title">implements</span> <span class="title">Config</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">    add(info: T): boolean &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    updated(info: T, <span class="attr">id</span>: number): <span class="keyword">void</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">delete</span>(id: number): <span class="keyword">void</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    get(id: number): any[] &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//使用这个泛型类 首先定义我们要传入的泛型类的数据</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span></span>&#123;</span><br><span class="line">    username: string | <span class="literal">undefined</span></span><br><span class="line">	password :string | <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> u = <span class="keyword">new</span> User()</span><br><span class="line">u.username = <span class="string">&#x27;张三&#x27;</span></span><br><span class="line">u.password = <span class="string">&#x27;123456&#x27;</span></span><br><span class="line"><span class="comment">//把User类型作为参数传入到泛型类里</span></span><br><span class="line"><span class="keyword">const</span> db = <span class="keyword">new</span> Mysql&lt;User&gt;()</span><br><span class="line">db.add(u) <span class="comment">//这样就不会报错</span></span><br><span class="line">db.add(<span class="string">&#x27;1234&#x27;</span>)<span class="comment">//报错</span></span><br><span class="line"><span class="comment">//当然我们还可以 写一个mongodb的数据库操作类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Mymongo</span>&lt;<span class="title">T</span>&gt; <span class="title">implements</span> <span class="title">Config</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">    add(info: T): boolean &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    updated(info: T, <span class="attr">id</span>: number): <span class="keyword">void</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">delete</span>(id: number): <span class="keyword">void</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    get(id: number): any[] &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;Method not implemented.&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在使用的时候  还是先定义传入泛型类的 数据类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">info</span> </span>&#123;</span><br><span class="line">    age:number | <span class="literal">undefined</span></span><br><span class="line">	sex:string | <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">in</span> = <span class="keyword">new</span> info() <span class="keyword">in</span>.age = <span class="number">18</span> info.sex = <span class="string">&#x27;你好&#x27;</span></span><br><span class="line"><span class="keyword">const</span> db = <span class="keyword">new</span> Mymongo&lt;info&gt;()</span><br><span class="line">db.update(<span class="keyword">in</span>,<span class="number">12</span>) <span class="comment">//不会报错</span></span><br><span class="line">db.update(u,<span class="number">12</span>) <span class="comment">//报错</span></span><br></pre></td></tr></table></figure>
<h2 id="TS-中的命名空间"><a href="#TS-中的命名空间" class="headerlink" title="TS 中的命名空间"></a>TS 中的命名空间</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>在一个ts文件里 可以使用namespace a&#123;&#125; 这种关键字去给一段代码片段命名</span><br><span class="line"><span class="number">2.</span>在使用的时候 也需要 向外暴露出去</span><br><span class="line"><span class="number">3.</span>原理就是函数的自调用  </span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用namespace 开启命名空间</span></span><br><span class="line">namespace A &#123;</span><br><span class="line">    interface Animal&#123;</span><br><span class="line">        name:string;</span><br><span class="line">        eat():<span class="keyword">void</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">        name:string</span><br><span class="line">        <span class="function"><span class="title">constructor</span>(<span class="params">theName:string</span>)</span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.name = theName</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;吃东西&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//使用</span></span><br><span class="line"><span class="keyword">const</span> d = <span class="keyword">new</span> A.Dog(<span class="string">&#x27;狼狗&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="TS装饰器"><a href="#TS装饰器" class="headerlink" title="TS装饰器"></a>TS装饰器</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>是一种特殊的声明 能够附加到类声明 方法上 属性 或者参数上 可以修改类的行为</span><br><span class="line"><span class="number">2.</span>通俗来讲 装饰器就是一个方法 可以注入到类 方法 属性 参数上 来扩展类 属性 方法 参数的功能</span><br><span class="line"><span class="number">3.</span>常见的装饰器 有 类装饰器 属性装饰器 方法装饰器 参数装饰器</span><br><span class="line"><span class="number">4.</span>装饰器的写法 普通装饰器(无法传参) 装饰器工厂(可以传参)</span><br><span class="line"><span class="number">5.</span>装饰器 是过去几年js最大的成就之一 也是ES7的标准特性之一</span><br></pre></td></tr></table></figure>
<h3 id="类装饰"><a href="#类装饰" class="headerlink" title="类装饰"></a>类装饰</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//类装饰器 在类声明之前就被声明 类装饰器应用于类构造的函数 可以用来监视 修改或者替换类的定义</span></span><br><span class="line"><span class="comment">//装饰器就是一个函数 形参 就是当前使用装饰器的类</span></span><br><span class="line"><span class="comment">//写一个普通装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">logClass</span>(<span class="params">params:any</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(params:any) <span class="comment">//这里打印出来的就是你装饰器下面的类 </span></span><br><span class="line">    <span class="comment">//我们就可以动态的扩展属性和方法</span></span><br><span class="line">    params.prototype.apiUrl = <span class="string">&#x27;动态扩展的属性&#x27;</span></span><br><span class="line">    <span class="comment">//也可以扩展方法</span></span><br><span class="line">    params.prototype.run = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;快跑&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//使用装饰器 用@关键字 + 装饰器函数的名称 写在你要装饰的类上面</span></span><br><span class="line">@logClass</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Http</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//上面我们用装饰的函数动态扩展了一个 apiUrl的属性 而这个属性在我们类里面是没有的 所以我们实例的时候也可以拿到</span></span><br><span class="line"><span class="keyword">const</span> h:any = <span class="keyword">new</span> Http()</span><br><span class="line"><span class="built_in">console</span>.log(h.apiUrl) <span class="comment">//打印出来了 动态扩展的属性</span></span><br><span class="line">h.run() <span class="comment">//快跑</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//装饰器 工厂 可以传参</span></span><br><span class="line"><span class="comment">//首先还是按照函数那么但是函数里里面要返回一个函数 最外层的函数的形参是你在调用函数的时候 传入的那个参数 返回的函数的形参 是传入的类</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params">params:any</span>)</span>&#123; <span class="comment">//这个参数 是你装起装入的的参数</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any</span>)</span>&#123; <span class="comment">//这个是装饰器传入的类</span></span><br><span class="line">        <span class="built_in">console</span>.log(params,<span class="string">&#x27;---我是装饰器传入&#x27;</span>)</span><br><span class="line">        <span class="built_in">console</span>.log(target,<span class="string">&#x27;我是类本身&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">@fun(<span class="string">&#x27;我是参数&#x27;</span>) <span class="comment">//给装饰器传入参数</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span> </span>&#123;</span><br><span class="line">    name:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">thename:string</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = thename</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> p:any = <span class="keyword">new</span> Preson(<span class="string">&#x27;夏明&#x27;</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//装饰器重载类里面的属性 比如我们一个类 里面的一些属性已经有值了 我想在装饰器里面重写</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params">params:any</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">@fun</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Http</span></span>&#123;</span><br><span class="line">    public apiUrl:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.apiUrl = <span class="string">&#x27;我是类里面里面生成的url&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    getdata():<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.apiUrl)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> h = <span class="keyword">new</span> Http()</span><br><span class="line">h.getdata() <span class="comment">//这里输出是 &#x27;我是类里面里面生成的url&#x27;</span></span><br><span class="line"><span class="comment">//下面我们开始在装饰器里面重些apiUrl</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params">params:any</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//首先我们需要继承这个类 并且返回这个类 就可以在里面重写 你类的属性和方法了</span></span><br><span class="line">    <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">params</span></span>&#123;</span><br><span class="line">        apiUrl:any = <span class="string">&#x27;我是在装饰器里面重写的数据&#x27;</span></span><br><span class="line">        <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="built_in">this</span>.apiUrl+<span class="string">&#x27;-----&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">@fun</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Http</span></span>&#123;</span><br><span class="line">    public apiUrl:string</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.apiUrl = <span class="string">&#x27;我是类里面里面生成的url&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    getdata():<span class="keyword">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.apiUrl)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> h = <span class="keyword">new</span> Http()</span><br><span class="line">h.getdata() <span class="comment">//这里面输出 ‘我是在装饰器里面重写的数据-------</span></span><br></pre></td></tr></table></figure>
<h3 id="属性装饰器"><a href="#属性装饰器" class="headerlink" title="属性装饰器"></a>属性装饰器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//主要用来修改 类里面的静态成员 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span> (<span class="params">params:any</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,attr:any</span>)</span>&#123;</span><br><span class="line">        <span class="comment">// console.log(target) //原型 也可以理解为实例对象</span></span><br><span class="line">        <span class="comment">// console.log(attr) //类里面的静态成员</span></span><br><span class="line">        <span class="comment">// console.log(params) //你在调用装饰器的时候 传入的参数</span></span><br><span class="line">        target[attr] = params <span class="comment">//这里就算是给 Preson类里面的 name赋值</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    @fun(<span class="string">&#x27;我是传入的参数&#x27;</span>)</span><br><span class="line">    public name:string | <span class="literal">undefined</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> Preson()</span><br><span class="line"><span class="built_in">console</span>.log(p.name) <span class="comment">//这里打印出来的是装饰器传入的参数</span></span><br><span class="line"><span class="comment">//如果要获取多个静态成员 就要多次调用装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span> (<span class="params">params:any | <span class="literal">undefined</span></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,attr:any</span>)</span>&#123;</span><br><span class="line">        <span class="comment">// console.log(target)</span></span><br><span class="line">        <span class="built_in">console</span>.log(attr)</span><br><span class="line">        <span class="comment">// console.log(attr1)</span></span><br><span class="line">        <span class="built_in">console</span>.log(params)</span><br><span class="line">        <span class="comment">// target[attr] = params</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    <span class="comment">//这里多次调用装饰器 我们上面的fun函数就会被多次执行</span></span><br><span class="line">    @fun(<span class="string">&#x27;我是传入的参数&#x27;</span>)</span><br><span class="line">    name:string | <span class="literal">undefined</span>;</span><br><span class="line">    @fun()</span><br><span class="line">    age:number | <span class="literal">undefined</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> p:any = <span class="keyword">new</span> Preson()</span><br></pre></td></tr></table></figure>
<h3 id="方法装饰器"><a href="#方法装饰器" class="headerlink" title="方法装饰器"></a>方法装饰器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>方法装饰器 主要用到方法上 可以用来监视 修改或替换方法</span><br><span class="line"><span class="number">2.</span>在运行时的时候 会传入下列三个参数 对于与静态成员来说是类的构造函数 对于实例成员就是类的原型对象</span><br><span class="line">方法的名字 以及 方法的属性描述(就是调用的那个函数函数体)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//比如我类里面有一个方法 我向在中间改一下或者在增加一段逻辑 就可以用方法装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">params:any</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,method:any,des:any</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(target) <span class="comment">//类本身</span></span><br><span class="line">        <span class="built_in">console</span>.log(method) <span class="comment">// 方法的名称 getdata</span></span><br><span class="line">        <span class="built_in">console</span>.log(des) <span class="comment">//方法的函数</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    @fn(<span class="string">&#x27;我是参数&#x27;</span>)</span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我在类里面&#x27;</span>)</span><br><span class="line">    &#125;   </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//现在我们需要 把传入getdata里面的参数 在装饰器里 都变成 字符串</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">params:any</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,method:any,des:any</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(target) <span class="comment">//类本身</span></span><br><span class="line">        <span class="built_in">console</span>.log(method) <span class="comment">// 方法的名称 getdata</span></span><br><span class="line">        <span class="built_in">console</span>.log(des) <span class="comment">//方法的函数 其中value就是你getdata调用的那个方法</span></span><br><span class="line">        des.value = <span class="function"><span class="keyword">function</span>(<span class="params">...arg:any[]</span>)</span>&#123;</span><br><span class="line">             <span class="comment">//这里打印就你调用getdata方法的时候传入的参数</span></span><br><span class="line">            arg = arg.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="built_in">String</span>(item)</span><br><span class="line">            &#125;)</span><br><span class="line">            <span class="built_in">console</span>.log(arg) <span class="comment">//这样就改变了所有的传进来的参数变成了字符串</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    @fn(<span class="string">&#x27;我是参数&#x27;</span>)</span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我在类里面&#x27;</span>)</span><br><span class="line">    &#125;   </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> p:any = <span class="keyword">new</span> Preson()</span><br><span class="line">p.getdata(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br><span class="line"><span class="comment">//但是上面有个问题 我们只是简单的把getdata的方法重新赋值了而已 并不是修改 或者增加信的代码逻辑</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">params:any</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">(<span class="params">target:any,method:any,des:any</span>) =&gt;</span>&#123;</span><br><span class="line">        <span class="comment">// console.log(target) //类本身</span></span><br><span class="line">        <span class="comment">// console.log(method) // 方法的名称 getdata</span></span><br><span class="line">        <span class="comment">// console.log(des) //方法的函数 其中value就是你getdata调用的那个方法</span></span><br><span class="line">        <span class="keyword">let</span> mymethods = des.value <span class="comment">//这里要先保存一下 然后等一下改变this</span></span><br><span class="line">        <span class="comment">// console.log(params)</span></span><br><span class="line">        des.value = <span class="function"><span class="keyword">function</span>(<span class="params">...arg:any[] </span>)</span>&#123;</span><br><span class="line">             <span class="comment">//这里打印就你调用getdata方法的时候传入的参数</span></span><br><span class="line">            arg = arg.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="built_in">String</span>(item)</span><br><span class="line">            &#125;)</span><br><span class="line">            <span class="built_in">console</span>.log(arg) <span class="comment">//这样就改变了所有的传进来的参数变成了字符串</span></span><br><span class="line">            </span><br><span class="line">            mymethods.apply(<span class="built_in">this</span>,arg); <span class="comment">//改变this指向之后 就可以执行getdata里面原本的逻辑 也可以执行我们这段代码的逻辑</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    @fn(<span class="string">&#x27;我是参数&#x27;</span>)</span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我在类里面&#x27;</span>)</span><br><span class="line">    &#125;   </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> p:any = <span class="keyword">new</span> Preson()</span><br><span class="line">p.getdata(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
<h3 id="参数装饰器"><a href="#参数装饰器" class="headerlink" title="参数装饰器"></a>参数装饰器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>装饰器可以被当作参数传入到方法当中去</span><br><span class="line"><span class="number">2.</span>一共有三个参数 第一个是类的原型 第二个 是方法的名称 第三个 是你装饰器在类的方法中的索引位置</span><br><span class="line"><span class="number">3.</span>在方法执行的时候会先执行装饰器里面的函数逻辑 在执行 方法</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">params:any|<span class="literal">undefined</span></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,paramsname:string,paramsindex:number</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(target) <span class="comment">//实例类</span></span><br><span class="line">        <span class="built_in">console</span>.log(paramsname) <span class="comment">//方法的名称</span></span><br><span class="line">        <span class="built_in">console</span>.log(paramsindex) <span class="comment">//在参数中的索引</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Preson</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//参方法中传装饰器 </span></span><br><span class="line">    <span class="function"><span class="title">getdata</span>(<span class="params">uuid:string,@fn(<span class="string">&#x27;xxx&#x27;</span>)</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(uuid)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> Preson()</span><br><span class="line">p.getdata(<span class="string">&#x27;我是实参传入&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="装饰器执行顺序"><a href="#装饰器执行顺序" class="headerlink" title="装饰器执行顺序"></a>装饰器执行顺序</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">属性装饰器&gt;方法装饰器(执行顺序从后向前)&gt;参数装饰器&gt;类装饰器(先执行离类最近的装饰器)</span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>TypeScript</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="http://example.com/2020/04/23/TypeScript/">http://example.com/2020/04/23/TypeScript/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>北城韩雨</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2020-04-23</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2019-06-03</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/TypeScript/">TypeScript</a></div><div class="post_share"></div></div><link rel="stylesheet" href="/" media="defer" onload="this.media='all'"/><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">打赏</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/weixin.jpg" target="_blank"><img class="post-qr-code-img" src="/img/weixin.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/taobao.jpg" target="_blank"><img class="post-qr-code-img" src="/img/taobao.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></button></div><script defer="defer" src="/"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2020/04/24/vue+ts%E5%AE%9E%E6%88%98/"><img class="prev-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue + Ts 实战</div></div></a></div><div class="next-post pull-right"><a href="/2020/04/22/ES6/"><img class="next-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">ES6/ES7/ES8/ES9/ES10/ES11</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2020/04/24/vue+ts实战/" title="Vue + Ts 实战"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-24</div><div class="title">Vue + Ts 实战</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#TypeScript"><span class="toc-text">TypeScript</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85"><span class="toc-text">安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E8%AF%91"><span class="toc-text">编译</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ts%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">ts中的数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="toc-text">布尔类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B"><span class="toc-text">数字类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B"><span class="toc-text">字符串类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-text">数组类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%83%E7%BB%84%E7%B1%BB%E5%9E%8B"><span class="toc-text">元组类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9E%9A%E4%B8%BE%E7%B1%BB%E5%9E%8B-enum"><span class="toc-text">枚举类型(enum)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%BB%E6%84%8F%E7%B1%BB%E5%9E%8B"><span class="toc-text">任意类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#null-%E5%92%8C-undefined"><span class="toc-text">null 和 undefined</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#void"><span class="toc-text">void</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#never%E7%B1%BB%E5%9E%8B"><span class="toc-text">never类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0"><span class="toc-text">函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E8%BD%BD%E5%87%BD%E6%95%B0"><span class="toc-text">重载函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS%E5%AE%9A%E4%B9%89%E7%B1%BB"><span class="toc-text">TS定义类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS-%E7%B1%BB%E9%87%8C%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-text">TS 类里的修饰符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS%E5%A4%9A%E6%80%81-%E7%BB%A7%E6%89%BF%E7%9A%84%E4%B8%80%E7%A7%8D"><span class="toc-text">TS多态 继承的一种</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS-%E6%8A%BD%E8%B1%A1%E7%B1%BB"><span class="toc-text">TS 抽象类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS-%E6%8E%A5%E5%8F%A3"><span class="toc-text">TS 接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E6%8E%A5%E5%8F%A3"><span class="toc-text">属性接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E5%8F%AF%E9%80%89%E5%B1%9E%E6%80%A7"><span class="toc-text">接口可选属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-text">函数类型接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E7%B4%A2%E5%BC%95%E6%8E%A5%E5%8F%A3"><span class="toc-text">可索引接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E7%B1%BB%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-text">类类型接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E6%89%A9%E5%B1%95"><span class="toc-text">接口扩展</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS%E4%B8%AD%E7%9A%84%E6%B3%9B%E5%9E%8B"><span class="toc-text">TS中的泛型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS-%E6%B3%9B%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-text">TS 泛型接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS%E4%B8%AD%E7%B1%BB%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0"><span class="toc-text">TS中类作为参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%BC%E5%90%88%E4%BD%BF%E7%94%A8"><span class="toc-text">综合使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS-%E4%B8%AD%E7%9A%84%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-text">TS 中的命名空间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TS%E8%A3%85%E9%A5%B0%E5%99%A8"><span class="toc-text">TS装饰器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E8%A3%85%E9%A5%B0"><span class="toc-text">类装饰</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E8%A3%85%E9%A5%B0%E5%99%A8"><span class="toc-text">属性装饰器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E8%A3%85%E9%A5%B0%E5%99%A8"><span class="toc-text">方法装饰器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%A3%85%E9%A5%B0%E5%99%A8"><span class="toc-text">参数装饰器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A3%85%E9%A5%B0%E5%99%A8%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F"><span class="toc-text">装饰器执行顺序</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>